<template>
  <div>
    <el-dialog
      title="数据详情"
      width="60%"
      :visible.sync="helpDialogSearch"
      class="showDialogClass"
      :before-close="handleClose"
      style="margin-top: -20px;"
    >
      <div class="dialog-content">
        <el-card
          class="box-card"
          v-if="item"
        >
          <div class="doc-i">
            <div class="doc-it">
              <p class="doc-it-tit">
                {{ item.textTitle }}
              </p>
              <span class="doc-it-tab">
                <span>{{ item.textOrder == null ? "暂无" : item.textOrder }}</span>
                <span>{{ item.modifyUserName }}</span>
                <span>{{ item.addDate }}</span>
              </span>
            </div>
            <div class="doc-ib">
              <p style="margin-top: 5px">
                关键词>> <span>{{ item.textLabel }}</span>
              </p>
            </div>
          </div>
        </el-card>
      </div>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="helpDialogSearch = false">
          取 消
        </el-button>
        <el-button
          type="primary"
          @click="helpDialogSearch = false"
        >
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>


  <script>
  export default {
    name: `helpSearchDialog`,
    props: {
      selectedItem: {
        type: Object,
        default: () => {},
      },
    },
    data () {
      return { helpDialogSearch: false };
    },
    computed: {
      item: {
        get () {
          return this.selectedItem;
        },
        set () {}, //添加一个空setter防止报错
      },
    },
    methods: {
      init () {
        this.helpDialogSearch = true;
      },
      handleClose () {
        this.cancel();
      },
      cancel () {
        this.item = null; // 清空数据
        this.helpDialogSearch = false;
      },
    },
  };
  </script>


  <style>
  .doc-it {
      margin-bottom: 10px;
    }

    .doc-it-co {
      padding: 10px;
      border: solid 1px #0e9aef;
      border-radius: 10px;
      float: left;
      margin-right: 30px;
      width: 150px;
      text-align: center;
    }

    .doc-it-tit {
      font-size: 0.938vw;
      font-weight: 700;
      margin-bottom: 0.26vw;
    }

    .doc-it-tab span {
      font-size: 14px;
      border-left: solid 1px #999999;
      padding: 0 10px;
    }

    .doc-it-tab span:first-child {
      border-left: none;
      padding-left: 0;
    }

    .doc-it-bth {
      float: right;
      margin-right: 50px;
      margin-top: -5px;
    }

    .doc-ib {
      width: 100%;
      padding: 5px 10px;
    }
  </style>
